<template>
	<view class="flex-column center-row">
		<!-- <image class="image-bg" src="https://mcdn.chatgk.com/xcx/static/images/login/loginbackgroundImg.png" mode="aspectFill"></image> -->
		<!-- 所有的图片地址换成服务端的 -->
		<image
			class="image-bg"
			src="https://mcdn.chatgk.com/xcx/static/images/login/loginbackgroundImg.png"
			mode="aspectFill"
		></image>
		<image
			v-if="!isFirstLogin"
			class="button-back"
			src="https://mcdn.chatgk.com/xcx/static/images/public/nav_back_white.png"
			mode="aspectFit"
			@tap="onClickBack"
		></image>
		<!-- <button v-if="isFirstLogin" class="button-skip" @tap="onClickSkipLogin">跳过</button> -->

		<view class="flex-column center-row view-bg">
			<!-- <image class="image-title" src="https://mcdn.chatgk.com/xcx/static/images/login/chat_gaokao.png"
				mode="aspectFit"></image> -->
			<text class="name">{{ storeInfo.name }}</text>
			<text class="text-title">高考志愿填报,由你掌握</text>

			<view class="flex-column center-row view-bottom-login">
				<view v-if="autoStatus" class="button-login" @click="submitlogin">手机号登录/注册</view>
				<button v-else class="button-login" @tap="onClickPhoneLogin">手机号登陆/注册</button>
				<view class="flex-row center-row otherLogin" style="margin-top: 68rpx">
					<view class="view-line"></view>
					<text class="text-platform">其它登录方式</text>
					<view class="view-line"></view>
				</view>

				<view style="margin-top: 34rpx" class="loginBtnBox">
					<view class="flex-column center-row memberCard">
						<image
							class="image-platform"
							src="https://mcdn.chatgk.com/xcx/static/images/login/login_card.png"
							mode="aspectFit"
							@tap="onClickCardLogin"
						></image>
						<text
							v-if="ishow"
							style="color: #d8d8d8; font-size: 22rpx; font-weight: bold; margin-top: 2rpx"
						>
							会员卡
						</text>
					</view>
					<view v-show="obj" class="flex-column center-row" @tap="clickWXLogin">
						<image
							class="image-platform"
							src="https://mcdn.chatgk.com/xcx/static/images/login/wxdl.png"
							mode="aspectFit"
						></image>
						<text
							v-if="ishow"
							style="color: #d8d8d8; font-size: 22rpx; font-weight: bold; margin-top: 2rpx"
						>
							微信
						</text>
					</view>
					<!-- 苹果账号登录 -->
					<!-- <view v-if="ishowapple" class="flex-column center-row" @tap="clickPGLogin">
						<image class="image-platform" src="https://mcdn.chatgk.com/xcx/static/images/login/pgdl.png"
							mode="aspectFit">
						</image>
						<text v-if="ishow"
							style="color: #D8D8D8; font-size: 22rpx; font-weight: bold; margin-top: 2rpx;">苹果</text>
					</view> -->
				</view>
			</view>
		</view>
		<view
			class="loginshowbox"
			v-if="ishowxiezi && !isSelectAgreement"
			@tap.stop="
				() => {
					ishowxiezi = false;
				}
			"
		>
			<view class="loginshowbox-main" @tap.stop="() => {}">
				<view class="loginshowbox-main-h">用户协议和隐私政策</view>
				<view class="loginshowbox-main-c">
					进入下一步，请先阅读并同意
					<text style="color: #ff3b0a" @tap="userAgreement">用户协议</text>
					<text>和</text>
					<text style="color: #ff3b0a" @tap="privacyPolicy">隐私政策</text>
				</view>
				<view class="loginshowbox-main-f">
					<view
						class="loginshowbox-no"
						@tap.stop="
							() => {
								ishowxiezi = false;
							}
						"
					>
						不同意
					</view>
					<view class="loginshowbox-no loginshowbox-yes" @tap.stop="onchangexieyi">同意并登陆</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import jwtDecode from 'jwt-decode';
export default {
	data() {
		return {
			isFirstLogin: true,
			obj: '',
			ishow: '',
			autoStatus: true,
			isNavBack: '1',
			ishowapple: true,
			isSelectAgreement: false,
			ishowxiezi: false,
			loginButton: 0, //会员卡1 微信2 苹果3
			// 判断是否是微信
			isWeixin: false,
			storeInfo: JSON.parse(uni.getStorageSync('storeInfo')),
			from:"",
		};
	},
	onLoad(option) {
		this.from=option.from
		this.ishow = getApp().globalData.joblog;
		const firstLogin = uni.getStorageSync('isFirstLogin');
		this.isFirstLogin = !Boolean(firstLogin);
		this.getOBJ();
		// #ifdef APP-PLUS
		this.isAutoLogin();
		// #endif
		this.isNavBack = option.isNavBack != undefined ? option.isNavBack : '1';

		switch (uni.getSystemInfoSync().platform) {
			case 'android':
				this.ishowapple = false;
				break;
			case 'ios':
				break;
			default:
				console.log('运行在开发者工具上');
				break;
		}
	},

	methods: {
		userAgreement() {
			uni.navigateTo({
				url: '/subpackages/subpackage1/pages/userAgreement/userAgreement'
			});
		},
		privacyPolicy() {
			uni.navigateTo({
				url: '/subpackages/subpackage1/pages/privacyPolicy/privacyPolicy'
			});
		},
		onchangexieyi() {
			this.ishowxiezi = false;
			this.isSelectAgreement = true;
			switch (this.loginButton) {
				case 1:
					this.onClickCardLogin();
					break;
				case 2:
					this.clickWXLogin();
					break;
				case 3:
					this.clickPGLogin();
					break;
				case 4:
					this.onClickPhoneLogin();
					break;
				case 5:
					this.submitlogin();
					break;
			}
		},
		// 点击勾选协议
		onClickCheckAgreement() {
			this.isSelectAgreement = !this.isSelectAgreement;
		},
		// 判断是否支持一键登陆
		isAutoLogin() {
			let _that = this;
			uni.getProvider({
				//获取可用的服务提供商
				service: 'oauth',
				success: function (res) {}
			});
			uni.preLogin({
				//预	登录
				provider: 'univerify', //用手机号登录
				success() {
					_that.autoStatus = true;
				},

				fail(err) {
					//预登录失败
					// uni.showToast({
					// 	title: '您的设备暂不支持一键登录',
					// 	icon: 'none',
					// 	duration: 1500
					// })
					_that.autoStatus = false;
				}
			});
		},
		submitlogin() {
			this.ishowxiezi = true;
			if (this.isWeixin) {
				this.loginButton = 2;
			}
			if (this.isSelectAgreement) {
				uni.navigateTo({
					url: '/pages/login/phone-login?isNavBack='
				});
			}
		},

		getOBJ() {
			const _this = this;
			uni.getProvider({
				service: 'oauth',
				success: function (res) {
					// _this.obj = res.providers.filter(item => item.id == "weixin")[0].isAppExist
					_this.isWeixin = !res.provider.indexOf('weixin');
				}
			});
		},
		// 点击返回
		onClickBack() {
			if(this.from==1){
				uni.switchTab({
					url:"/pages/tabBar/home/home"
				})
			}else{
				uni.navigateBack();
			}
		},
		// 点击跳过
		onClickSkipLogin() {
			uni.navigateTo({
				url: '/pages/login/select-province'
			});
		},
		// 点击手机号登录
		onClickPhoneLogin() {
			if (!this.isSelectAgreement) {
				this.loginButton = 4;
				this.ishowxiezi = true;
				return;
			}
			uni.navigateTo({
				url: '/pages/login/phone-login?isNavBack=' + this.isNavBack
			});
		},
		// 点击会员卡登录
		onClickCardLogin() {
			if (!this.isSelectAgreement) {
				this.loginButton = 1;
				this.ishowxiezi = true;
				return;
			}
			uni.navigateTo({
				url: './card-login'
			});
		},
		// 点击微信进行登录
		clickWXLogin() {
			uni.navigateTo({
				url: '/pages/login/phone-login?isNavBack=' + this.isNavBack
			});
			if (!this.isSelectAgreement) {
				this.loginButton = 2;
				this.ishowxiezi = true;
				return;
			}

			// const _this = this
			// uni.getProvider({
			// 	service: 'oauth',
			// 	success: function(res) {
			// 		const obj1 = res.providers.filter(item => item.id == "weixin")
			// 		if (obj1[0].isAppExist) {
			// 			uni.login({
			// 				"provider": "weixin",
			// 				"onlyAuthorize": true, // 微信登录仅请求授权认证
			// 				success: function(event) {
			// 					const {
			// 						code
			// 					} = event
			// 					_this.$request.wxdl({
			// 						"code": event.code
			// 					}).then(res => {
			// 						const userInfo = getApp().globalData.userInfo || {}
			// 						// const toBindPhone = res.data.toBindPhone
			// 						if (res.data.toBindPhone == 1) {
			// 							uni.navigateTo({
			// 								url: './binding-phone?unionid=' +
			// 									res.data.unionid
			// 							});
			// 						} else if (!userInfo.pid) {
			// 							uni.navigateTo({
			// 								url: './perfect-info'
			// 							});
			// 						} else {
			// 							uni.showToast({
			// 								title: "登录成功"
			// 							});
			// 							uni.switchTab({
			// 								url: "/pages/tabBar/home/home"
			// 							});
			// 						}
			// 					})
			// 				},
			// 				fail: function(err) {
			// 					// 登录授权失败
			// 					// err.code是错误码
			// 				}
			// 			})

			// 		} else {
			// 			//网页登录开始

			// 			uni.showModal({
			// 				content: "操作错误"

			// 			})
			// 			//网页登录结束
			// 		}

			// 	}
			// })
		},
		//苹果登录
		clickPGLogin() {
			if (!this.isSelectAgreement) {
				this.loginButton = 3;
				this.ishowxiezi = true;
				return;
			}
			const _this = this;
			uni.getSystemInfo({
				success: (res) => {
					const str = res.osVersion.substring(0, 2); //获取手机系统信息版本前两位
					if (str >= 13) {
						uni.getProvider({
							service: 'oauth',
							success: function (res) {
								if (~res.provider.indexOf('apple')) {
									uni.login({
										provider: 'apple',

										scopes: 'email',
										success: function (loginRes) {
											_this.$request
												.pgdl({
													user: loginRes.appleInfo.user,
													identityToken: loginRes.appleInfo.identityToken
												})
												.then((res) => {
													const userInfo = getApp().globalData.userInfo || {};
													if (res.data.toBindPhone == 1) {
														uni.navigateTo({
															url: './binding-phone?apple_user=' + res.data.apple_user
														});
													} else if (!userInfo.pid) {
														uni.navigateTo({
															url: './perfect-info'
														});
													} else {
														uni.showToast({
															title: '登录成功'
														});
														uni.switchTab({
															url: '/pages/tabBar/home/home'
														});
													}
												})
												.catch((res) => {});
										},
										fail: function (err) {},

										force: true
									});
								}
							}
						});
					} else {
						uni.showToast({
							title: '系统版本太低，请升级您的系统',
							icon: 'none'
						});
					}
				}
			});
		},

		//微信分享s
		clickWXshare() {
			uni.share({
				provider: 'weixin',
				scene: 'WXSceneSession',
				type: 1,
				summary: '分享功能！',
				success: function (res) {
					uni.showModal({
						content: res
					});
				},
				fail: function (err) {
					uni.showModal({
						content: err
					});
				}
			});
		}
	}
};
</script>

<style>
button::after {
	border: none;
}

.image-bg {
	position: absolute;
	width: 100vw;
	height: 100vh;
	z-index: -1;
}

.image-title {
	width: 530rpx;
	height: 106rpx;
	margin-top: 180rpx;
	margin-left: 16%;
}

.memberCard {
	display: flex;
	flex-direction: row;
	align-items: center;
}

.image-platform {
	width: 68rpx;
	height: 68rpx;
	margin-bottom: 4rpx;
}

.view-bg {
	/* margin-top: var(--status-bar-height); */
	width: 100%;
	display: flex;
	flex-direction: column;
	text-align: center;
}
.name {
	font-size: 40px;
	color: #ffffff;
	margin-top: 40px;
}

.button-back {
	position: fixed;
	left: 32rpx;
	top: var(--status-bar-height);
	width: 80rpx;
	height: 80rpx;
}

.button-skip {
	position: fixed;
	height: 80rpx;
	top: 150rpx;
	line-height: 80rpx;
	right: 32rpx;
	/* top: var(--status-bar-height); */
	color: #fff;
	font-size: 32rpx;
	font-weight: bold;
	background-color: transparent;
}

.text-title {
	color: #fff;
	font-size: 44rpx;
	font-weight: bold;
	margin-top: 50rpx;
}

.view-bottom-login {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	padding-bottom: calc(env(safe-area-inset-bottom) + 40rpx);
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.button-login {
	color: #fff;
	font-size: 28rpx;
	font-weight: bold;
	background: #ff3b0a;
	width: 600rpx;
	height: 80rpx;
	line-height: 82rpx;
	border-radius: 20rpx;
	display: flex;
	justify-content: center;
	align-items: center;
}

.otherLogin {
	display: flex;
	flex-direction: row;
}

.view-line {
	width: 218rpx;
	height: 2rpx;
	background-color: #d8d8d8;
}

.text-platform {
	color: #d8d8d8;
	font-size: 24rpx;
	font-weight: bold;
	margin: -13rpx 10rpx 0 10rpx;
}

.loginBtnBox {
	width: 80%;
	display: flex;
	justify-content: space-evenly;
}

.text-read {
	width: 80%;
	font-weight: 600;
	color: #ffffff;
	font-size: 24rpx;
	margin-top: 30rpx;
}

.loginshowbox {
	position: fixed;
	top: 0;
	z-index: 10;
	width: 100vw;
	height: 100vh;
	background-color: rgba(0, 0, 0, 0.6);
	display: flex;
	justify-content: center;
	align-items: center;
}

.loginshowbox-main {
	padding: 0 38rpx;
	width: 686rpx;
	height: 380rpx;
	background: #ffffff;
	border-radius: 20rpx;
	box-sizing: border-box;
}

.loginshowbox-main-h {
	height: 120rpx;
	font-size: 32rpx;
	font-family: PingFangSC-Semibold, PingFang SC;
	font-weight: 600;
	color: #333333;
	display: flex;
	justify-content: center;
	align-items: center;
}

.loginshowbox-main-c {
	width: 100%;
	font-size: 32rpx;
	font-family: PingFangSC-Semibold, PingFang SC;
	font-weight: 600;
	color: #999999;
	text-align: center;
}

.loginshowbox-main-f {
	margin-top: 50rpx;
	width: 100%;
	display: flex;
	justify-content: space-evenly;
}

.loginshowbox-no {
	width: 222rpx;
	height: 64rpx;
	border-radius: 32rpx;
	border: 2rpx solid #979797;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 28rpx;
	font-family: PingFangSC-Semibold, PingFang SC;
	font-weight: 600;
	color: #999999;
}

.loginshowbox-yes {
	border: none;
	color: #ffffff;
	background: #ff3b0a;
}

@media screen and (min-width: 580px) and (max-width: 1024px) {
	.view-bottom-login {
		padding-bottom: 40rpx;
	}
}
</style>
